<template>
	<view class="my-customer" :data-theme="themeStyle">
		<view class="head-view">
			<view class="head-data">
				<view class="head-data-num color-base-text">{{count || 0}}</view>
				<view class="head-data-name">区域用户数量</view>
			</view>
			<view class="menu-view">
				<view class="menu-item" :class="menu_select == 0 ? 'native' : 'normal'" @click="menuEvent(0)">按累计购买金额
				</view>
				<view class="menu-item" :class="menu_select == 1 ? 'native' : 'normal'" @click="menuEvent(1)">按最近登录时间
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :top="294">
			<view class="content">
				<block v-if="customerData.length > 0">
					<view class="customer-item" v-for="(item ,index) in customerData" :key="index">
						<view class="up-item">
							<image class="img" :src="item.headimg ? $util.img(item.headimg) : $util.getDefaultImage().default_headimg" mode="aspectFill"></image>
							<view class="customer-name">{{item.nickname}}</view>
							<view class="contact color-base-text">所属店：{{item.site_name}}</view>
						</view>
						<view class="down-item">
							<view class="left-view">
								<view class="left-intr">累计消费(元)</view>
								<view class="left-cont">{{item.order_money}}</view>
							</view>
							<!-- <view class="right-view">{{item.create_time}}</view> -->
							<view class="left-view">
								<view class="left-intr">最近登录时间</view>
								<view class="left-cont">{{$util.timeStampTurnTime(item.login_time,1)}}</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<ns-empty text="暂无相关数据" :fixed="!1" :isIndex="!1"></ns-empty>
				</block>
			</view>
		</mescroll-body>
		<!-- <loading-cover ref="loadingCover"></loading-cover> -->
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	import MescrollMixin from "@/components/mescroll/mescroll-mixins.js";
	export default {
		mixins: [globalConfig,MescrollMixin],
		data() {
			return {
				count:0,
				menu_select: 0,
				customerData:[]
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '区域用户'
			})
		},
		methods: {
			upCallback(page) {
				this.$api.sendRequest({
					url: '/fenxiao/api/shop/myCustomer',
					data: {
						type:this.menu_select + 1,
						page: page.num,
						limit: page.size
					},
					method: 'POST',
					success: res => {
						let newArr = [];
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						//设置列表数据
						if (page.num == 1) this.customerData = []; //如果是第一页需手动制空列表
						this.count = res.data.count;
						this.customerData = this.customerData.concat(newArr); //追加新数据
						this.mescroll.endBySize(this.customerData.length, res.data.count)
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						this.mescroll.endBySize(this.customerData.length, res.data.total)
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			menuEvent(e) {
				this.menu_select = e
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>

<style lang="scss">
	.my-customer {
		.head-view {
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			width: 100vw;
			height: 294rpx;
			background: #F9F9F9;
			z-index: 100;
			.head-data {
				height: 190rpx;
				background: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.head-data-num {
					font-size: 44rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #00AF66;
					line-height: 62rpx;
				}

				.head-data-name {
					margin-top: 8rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}
			}

			.menu-view {
				height: 104rpx;
				background: #F9F9F9;
				padding-top: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.menu-item {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;

					&.native {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #010101;
						line-height: 40rpx;
					}

					&.normal {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #909399;
						line-height: 40rpx;
					}
				}
			}
		}
		.content{
			padding: 0rpx 30rpx;
			.customer-item{
				padding: 24rpx 24rpx 30rpx 24rpx;
				background: #FFFFFF;
				margin-bottom: 24rpx;
				.up-item{
					display: flex;
					align-items: center;
					.img{
						width: 88rpx;
						height: 88rpx;
						border-radius: 44rpx;
					}
					.customer-name{
						max-width: 200rpx;
						margin-left: 16rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #010101;
						line-height: 45rpx;
					}
					.contact{
						max-width: 340rpx;
						margin-left: 12rpx;
						padding: 6rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #00AF66;
						line-height: 37rpx;
						background: rgba(0,175,102,0.1);
					}
				}
				.down-item{
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left-view{
						display: flex;
						align-items: center;
						.left-intr{
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #909399;
							line-height: 37rpx;
						}
						.left-cont{
							margin-left: 12rpx;
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #010101;
							line-height: 37rpx;
						}
					}
					.right-view{
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #909399;
						line-height: 37rpx;
					}
				}
			}
		}
	}
</style>